// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';
import * as ActionTypes from '../../constants/constants.js';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { deliveryAddressInsert, deliveryAddressList, deliveryAddressDefault, deliveryAddressGet, deliveryAddressDel, deliveryAddressUpdate } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RefreshScrollView, Layout, LoadingData } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, borderBottom, hotTextColor, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'
class Address extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false
    }
  }


  componentDidMount() {
    // this.addressList.props.request()
  }


  // 收货地址列表 /delivery/address/list
  deliveryAddressList(options) {
    return deliveryAddressList()
  }
  // 获取默认收货地址 /delivery/address/default
  deliveryAddressDefault(options) {
    deliveryAddressDefault().then(res => {

    })
  }
  // 通过id获取收货地址 /delivery/address/get
  deliveryAddressGet(options) {
    deliveryAddressGet().then(res => {

    })
  }
  // 通过ID删除收货地址 /delivery/address/del
  deliveryAddressDel(options) {
    deliveryAddressDel().then(res => {

    })
  }
  // 修改收货地址 /delivery/address/update
  deliveryAddressUpdate(options) {
    deliveryAddressUpdate().then(res => {

    })
  }

  componentWillReceiveProps(nextProps) {
    console.log(nextProps)
    if (nextProps.refresh) {
      Actions.refresh({ refresh: false })
      this.addressList.props.request()
    }
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    deliveryAddressList().finally(() => {
      this.setState({
        refreshing: false
      })
    })
  }

  // renderAddress() {
  //   const { addressList, method, dispatch } = this.props
  //   return addressList.map((item, index) => {
  //     return (

  //     )
  //   })
  // }

  render() {
    const { addressList, method, dispatch } = this.props
    const { refreshing } = this.state
    return (
      <Layout
        style={{ backgroundColor: '#fff' }}
        header={<Status />}
        footer={<View style={{ padding: 15, backgroundColor: '#fff' }}>
          <TouchableOpacity
            onPress={() => {
              Actions.creatAddress()
            }}
            style={{
              paddingVertical: 14,
              paddingHorizontal: 20,
              backgroundColor: hotTextColor,
              borderRadius: 6,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>添加地址</Text>
          </TouchableOpacity>
        </View>
        }
      >
        <NavBar
          title="收货地址"
          back={true}
        />
        <RefreshScrollView
          style={Style.content}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
        >
          <LoadingData
            ref={(r) => this.addressList = r}
            request={() => {
              return this.deliveryAddressList()
            }}
            data={addressList}
            rowItem={(item, index) => {
              return (
                <View
                  key={index}
                  style={{
                    overflow: 'hidden',
                    backgroundColor: '#fff',
                    zIndex: 0,
                    padding: 15,
                    paddingRight: 0,
                    flexDirection: 'row',
                    alignItems: 'center',
                    ...borderBottom()
                  }}
                >
                  <TouchableOpacity
                    style={{
                      flex: 1
                    }}
                    onPress={() => {
                      if (method && method == 'select') {
                        dispatch({
                          type: ActionTypes.setSubmitOrderAddress,
                          data: item
                        })
                        Actions.pop()
                      }
                    }}
                  >
                    <View style={{
                      alignItems: 'center',
                      flexDirection: 'row',
                      marginBottom: 8
                    }}>
                      {item.isDefault == 1 && <View style={{ backgroundColor: '#E5C67B', paddingVertical: 3, paddingHorizontal: 8, borderRadius: 4, marginRight: 15 }}><Text style={{ fontSize: 12, color: '#fff', }}>默认</Text></View>}
                      <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>{item.consignee}</Text>
                      <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, marginLeft: 15 }}>{item.phone}</Text>
                    </View>
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                      }}
                    >
                      <Text style={{ fontSize: 14, color: '#61676F', marginRight: 12 }}>
                        {item.fullAddress}
                      </Text>
                    </View>
                  </TouchableOpacity>
                  <View style={{}}>
                    <TouchableOpacity
                      onPress={() => {
                        Actions.editAddress({ id: item.id })
                      }}
                      style={{
                        padding: 15
                      }}
                    >
                      <Icon name="md-create" size={22} color={'#61676F'} />
                    </TouchableOpacity>
                  </View>
                </View>
              )
            }}
          >
          </LoadingData>

        </RefreshScrollView>
      </Layout>
    );
  }
}


export default connect(({ user, addressList, defaultAddres }) => ({
  user, addressList, defaultAddres
}))(pureRender(Address))
